<template>
  <div class="page-content">
    <TableBar :columns="columns" :layout="layout">
      <div slot="bottom">
        <el-tooltip
          class="item"
          effect="dark"
          v-auth="'basics_staff_insert'"
          content="点击生成员工邀请码"
          placement="top-start"
        >
          <el-button size="small" type="primary" @click="inviteStaff"
            >邀请员工</el-button
          >
        </el-tooltip>
      </div>
    </TableBar>
    <TheTable
      :data="tableList"
      :page.sync="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
    >
      <el-table-column label="头像" fixed="left" prop="profilePhoto"  v-if="columns[0].show">
        <template slot-scope="scope">
          <el-image :src="scope.row.profilePhoto"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="姓名" fixed="left" prop="username"  v-if="columns[1].show">
      </el-table-column>
      <el-table-column label="性别" fixed="left" v-if="columns[2].show">
        <template slot-scope="scope">
          <span>{{ scope.row.sex === 1 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="角色" fixed="left" prop="name"  v-if="columns[3].show">
        <template slot-scope="scope">
          <el-tag style="margin-bottom:5px" v-for="(item, index) in scope.row.name" :key="index">{{
            scope.row.name[index]
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right"  v-if="columns[4].show">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="修改角色" placement="top-start">
            <el-button
              type="primary"
              size="small"
              v-auth="'basics_staff_update'"
              icon="el-icon-user-solid"
              @click="editRole(scope.row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="开除员工" placement="top-start">
            <el-button
              type="danger"
              size="small"
              v-auth="'basics_staff_delete'"
              icon="el-icon-delete"
              @click="removeStaff(scope.row.id)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </TheTable>
    <el-dialog
      title="修改员工角色"
      :visible.sync="editdialogVisible"
      width="29%"
      :destroy-on-close="true"
      @close="roleIds = []"
    >
      <el-form label-width="100px" ref="editRef">
        <el-form-item prop="username" label="员工名称">
          <el-input v-model="username" disabled></el-input>
        </el-form-item>
        <el-form-item label="拥有角色" v-if="editdialogVisible">
          <el-tag
            v-for="(item, index) in hasRolesList"
            :key="index"
            closable
            @close="handleChose(index)"
            >{{ item.name }}</el-tag
          >
        </el-form-item>
        <el-form-item label="可添加角色">
          <el-tag
            class="addRole"
            v-for="(item, index) in chooseList"
            type="success"
            :key="index"
            @click="addNewRole(index)"
            >{{ item.name }} <span class="el-icon-plus"></span
          ></el-tag>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editEvent">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="员工邀请码" :visible.sync="dialogVisible" width="37%">
      <el-input v-model="inviteCode"></el-input>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEnterpriseStaffInfo,
  getInviteCode,
  getEnterpriseStaffInfoByPage,
  deleteStaff,
  joinEnterprise,
} from "../../Api/rightsmanage/enterprise ";
import { editEmployeeRole } from "../../Api/rightsmanage/index";

import { mapActions, mapState } from "vuex";
export default {
  name: "EmployeeInformation",
  data() {
    return {
      msg: "权限管理--人员信息管理",
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      username: "",
      userID: "",
      tableList: [],
      showPage: true,
      staffID: "",
      roleIds: [],
      layout: "refresh,column",
      editdialogVisible: false,
      //员工邀请码面板
      dialogVisible: false,
      inviteCode: "",
      columns: [
        { name: "头像", show: true, prop: "profilePhoto" },
        { name: "姓名", show: true, prop: "username" },
        { name: "性别", show: true, prop: "sex" },
        { name: "电话", show: true, prop: "phone" },
        { name: "操作", show: true },
      ],
      // 临时存储员工角色
      tempRoleList: [],
      //员工已有角色
      roleIds: [], //将传入接口的角色ID数组
      hasRolesList: [], //已经拥有的角色数组
      chooseList: [], //可选择的元素
    };
  },
  computed: {
    ...mapState({
      roleInfoList: (state) => state.roleInfo.roleInfoList, //企业所有角色信息
    }),
    ...mapState({
      // roleInfoList: (state) => state.roleInfo.userPermissions,
    }),
  },
  created() {
    this.getTableData();
    this.initData();
  },
  methods: {
    ...mapActions("roleInfo", ["getRoleInfo"]),
    async initData() {
      if (!this.roleInfoList) {
        this.getRoleInfo();
      }
      console.log(this.roleInfoList);
    },
    async getTableData() {
      const { data: res } = await getEnterpriseStaffInfoByPage(
        this.page.pageSize,
        this.page.current
      );
      console.log(res);
      this.tableList = res.data.records;
      this.tableList.map((item) => {
        item.name = [];
        item.remarks = [];
        item.roles.forEach((e) => {
          item.name.push(e.name);
          item.remarks.push(e.remarks);
        });
        return item;
      });
      console.log(this.tableList);
      this.page.total = res.data.total;
    },
    changeSize(size) {
      this.page.pageSize = size.pageSize;
      this.getTableData();
    },
    changePage(page) {
      this.page.current = page.current;
      this.getTableData();
    },
    editRole(row) {
      row = JSON.parse(JSON.stringify(row));
      this.username = row.username;
      this.userID = row.id;
      console.log(row);
      this.hasRolesList = row.roles;
      this.removeDuplication();
      this.editdialogVisible = true;
    },
    //提取可选择角色数组
    removeDuplication() {
      this.chooseList = this.roleInfoList.filter((item) => {
        let arrlist = this.hasRolesList.map((v) => v.id);
        return !arrlist.includes(item.id);
      });
    },
    //修改员工角色
    async editEvent() {
      this.roleIds = this.hasRolesList.map((e) => {
        return e.id;
      });
      console.log(this.roleIds);
      const { data: res } = await editEmployeeRole(this.userID, this.roleIds);
      console.log(res);
      if (res.statusCode === 20000) {
        this.$message.success("修改角色信息成功");
        this.editdialogVisible = false;
      }
    },
    //开除员工
    async removeStaff(id) {
      const confirmResuly = await this.$confirm(
        "此操作将移除所选员工, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteStaff(id);
      if (res.statusCode === 20000) {
        this.$message.success("已成功移除员工");
      }
    },
    //生成邀请码
    async inviteStaff() {
      const { data: res } = await getInviteCode();
      if (res.statusCode === 20000) {
        this.inviteCode = res.data;
        this.dialogVisible = true;
      }
    },
    addNewRole(index) {
      this.hasRolesList.push(this.chooseList[index]);
      let temp = [];
      for (let i = 0; i < this.chooseList.length; i++) {
        if (i != index) {
          temp.push(this.chooseList[i]);
        }
      }
      this.chooseList = temp;
    },
    handleChose(index) {
      console.log(index);
      this.chooseList.push(this.hasRolesList[index]);
      let temp = [];
      for (let i = 0; i < this.hasRolesList.length; i++) {
        if (i != index) {
          temp.push(this.hasRolesList[i]);
        }
      }
      this.hasRolesList = temp;
    },
  },
};
</script>
<style scoped lang="scss">
.el-image {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  margin-left: 28%;
}
.el-tag {
  cursor: pointer;
}
.el-tag {
  margin: 0 7px;
  cursor: pointer;
}
.addRole {
  &:hover {
    background-color: #67c23a;
    border-color: #67c23a;
    color: #fff;
  }
}
</style>